<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">

</head>
<body>
    <div class="login-nav" style="width: 80%;margin: 0 auto;">
        <img src="../img/logo.png" alt="" srcset="">
    </div>

    <div class="layui-container" style="width: 100%;height: 500px;;margin: 0 auto;background-image: url(../img/background-login.jpg);background-size: cover;">
        <div class="layui-row">
            <div class="layui-col-md2">
                &nbsp;
            </div>
            <div class="layui-col-md4 layui-form">
                <div class="login-body">
                    <div class="login bg-black" style="height: 200px;margin-top: 100px;">
                        <form class="layui-form bg-blue" action="" >    
                            <h1 style="margin-bottom: 10px;margin-left: 100px;">登录界面</h1>                 
                            <div class="layui-form-item margin-top-10">
                                <label class="layui-form-label">用户名  
                                    <i class="layui-icon">&#xe66f;</i>        
                                </label>
                                <div class="layui-input-inline">
                                    <!-- //采用inline表示可以继续放 -->  
                                    <input type="username" name="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verType="msg">      
                                </div>
                                <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                           </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码
                                    <i class="layui-icon"> &#xe672;</i>     
                                </label>
                                <div class="layui-input-inline">
                                <input type="userpassword" name="userpassword" required lay-verify="userpassword" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                                <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">记住密码<i class="layui-icon"> &#xe679;</i> </label>
                                <div class="layui-input-block">
                                  <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">身份类别<i class="layui-icon">&#xe770;</i></label>
                                <div class="layui-input-block">
                                  <input type="radio" name="kinds" value="用户" title="用户" checked>
                                  <input type="radio" name="kinds" value="商家" title="商家">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                                <a href="../view/register.html"><button type="button" class="layui-btn layui-btn-primary">注册</button></a>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">其他方式</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon" style="font-size: 33px;"> &#xe676;</i>
                                    <i class="layui-icon" style="font-size: 33px;"> &#xe677;</i>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="../plugins/layui/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use('form', function(){
        var form = layui.form;
        
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        });
    </script>
</body>
</html>